
<template>
  <div class="w-100 h-100">
    <div class="w-100" style="height: 10%">
      <FakeLegend
        style="margin: auto 30px auto 0px"
        :color="colorSingleList"
        :text="['建成前', '建成后']"
      >
      </FakeLegend>
    </div>

    <div class="w-100 d-flex" style="height: 80%">
      <div style="width: 90%; height: 100%" id="zhi1"></div>
      <div style="width: 10%; height: 83%;font-size: 20px;flex-wrap: wrap;" class="d-flex justify-content-center ">
         <div class="biaozhu" style="background-color: rgba(92, 225, 255, 0.2); border-left:rgba(92, 225, 255, 0.2) 5px solid;">
            雨水花园
         </div>
         <div class="biaozhu" style="background-color: rgba(184, 235, 143, 0.2);border-left:rgba(184, 235, 143, 0.2) 5px solid;">
            滞留区生态
         </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFunc } from "@/hook/useFunc";
import * as echarts from "echarts";
const colorSingleList = ["rgba(92, 225, 255, 1)", "rgba(251, 216, 160, 1)"];
var xData = [
  "雨湿地",
  "植草沟",
  "雨水塘",
  "自然雨水花园",
  "附属绿地雨水花园",
  "城市道路雨水花园",
];
const echartsData = ref();
let myChart: any = null;
onBeforeMount(() => {
  
});
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
onMounted(() => {
  
  echartsData.value =props.echartsData
  let option = {
    background: "transparent",
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",
      textStyle: {
        color: "white",
        fontSize: 20,
      },
      axisPointer: {
        type: "shadow",

        textStyle: {
        },
      },
      formatter: function (params: any) {
        let result = `<div style="color: #fff; padding: 5px">`;
        result += `<strong>${params[0].axisValueLabel}</strong><br/>`; // 显示横轴标签
        params.forEach((param: any) => {
            // 使用 Math.abs(param.value) 来获取绝对值，并在后面添加百分号 '%'
            result += `${param.marker}${param.seriesName}: ${Math.abs(param.value).toFixed(2)}%<br/>`;
        });
        result += `</div>`;
        return result;
    }
    },
    grid: {
      borderWidth: 0,
      top: 0,
      bottom: 50,
      left: 170,
      right: 0,
      textStyle: {},
    },
    calculable: true,
    xAxis: [
      {
        type: "value",
        max: 100,

        axisLine: {
          lineStyle: {
            color: "#667A8E",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
                color: 'rgba(92,225,255,0.5)', // 设置分割线颜色为蓝色
                type: 'dashed'  // 设置分割线为虚线
            }
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {

          formatter: (m: any) => {
            return Math.abs(m) + "%";
          },
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",

        data: xData,
        axisLine: {
          show: true,
          lineStyle: {
            // color: "#5CE1FF", // 设置 X 轴颜色为蓝色
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
        },
        splitArea: {
          show:true,
          color: 'rgba(77, 255, 36, 0.05)' 
        },
      },
    ],
    series: [
      {
        name: "建成后",
        type: "bar",
        barWidth: 10,
        gridIndex: 0,
        yAxisIndex: 0,
        label: {
          show: false,
          position: "top"
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: "rgba(251, 216, 160, 1)", // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: "rgba(251, 216, 160, 0)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        data: echartsData.value.map((item: any) => item.after),
      },

      {
        name: "建成前",
        type: "bar",
        barWidth: 10,
        barGap: "-100%",
        gridIndex: 0,
        yAxisIndex: 0,
        label: {
          show: false,
          position: "bottom",
         
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(92, 225, 255, 1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(92, 225, 255, 0)", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
            barBorderRadius: 0,
          },
        },
        data: echartsData.value.map((item: any) => -item.before),
      },
    ],
  };
   myChart = echarts.init(document.getElementById("zhi1") as HTMLElement);
  useFunc().setDefaultOption(myChart)
  myChart.setOption(option);

});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style lang="less" scoped>
.biaozhu{
    width: 100%;
    height: 50%;
    writing-mode: vertical-lr;
    text-align: center;
    padding: 0 15px 0 14px;
}
</style>
